<template>
	<view class="login">
		<view class="login-tel">
			<view class="tel-main">
				<view class="logo">
					<image src="../../static/logoall3.png" alt="">
				</view>
				<view class="login-form">
					<view class="login-user">
						<text class="user-text">手&nbsp;机&nbsp;号&nbsp;&nbsp;:</text>
						<input type="number" focus="true" v-model="userName" value="" placeholder="请输入正确的11位手机号">
					</view>

					<view class="login-user">

						<text class="user-text">密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;:</text>
						<input :type="showPwd ? 'text' : 'password'" v-model="userPwd" value="" placeholder="请输入密码"
							class="no-border">
						<view class="show-pwd" @tap="toggleShowPwd">{{ showPwd ? '隐藏密码' : '显示密码' }}</view>

					</view>

					<view class="login-user">
						<text class="user-text">确认密码:</text>
						<input :type="showPwd ? 'text' : 'password'" v-model="confirmUserpwd" value="" placeholder="请再次输入密码"
							class="no-border">
							<view class="show-pwd" @tap="toggleShowPwd">{{ showPwd ? '隐藏密码' : '显示密码' }}</view>
					</view>

					<view class="login-user">
						<text class="user-text">验证码:</text>
						<input type="text" placeholder="请输入验证码" v-model="userCode">
						<view  class="btn1" @click="sendcode">{{codemsg}}</view>
					</view>

				</view>
			</view>
			<view class="tel" @click='gonextcode'>注册</view>
		</view>

	</view>
	</view>

</template>

<script>
	import $http from '@/common/api/request.js' //引入request组件
	export default {
		data() {
			return {
				userName: '',
				type:'reg',
				userPwd: '',
				confirmUserpwd: '',
				userCode: "", // 添加usercode属性并初始化为空字符串
				phone: "", //上个页面传过来的phone
				getCode: "",
				showPwd: false, // 控制密码显示或隐藏
				codenum: 60,
				// 显示的文本
				codemsg: "发送验证码",
				// 按钮是否禁用
				disable: false,
				//用户输入的内容

				rules: {
					userName: {
						rule: /^1[3456789]\d{9}$/,
						msg: "请输入正确的11位手机号"
					},
					userPwd: {
						rule: /^[0-9a-zA-z]{6,16}$/,
						msg: "密码应该为6-16位字符"
					},
					userCode: {
						rule: /^\d{4}$/,
						msg: "请输入四位数验证码"
					}

				},
			}
		},
		mounted() {
			// this.codemsg = '重新发送(' + this.codenum + ')';
		},
		methods: {

			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return false;
				}
				return bool;
			},
			toggleShowPwd() { // 切换密码显示或隐藏
				this.showPwd = !this.showPwd;
			},
			// 发送验证码
			sendcode() {
				if (!this.validate('userName')) return;
				if (!this.validate('userPwd')) return;

				//请求接口返回验证码
				$http.request({
					url: "/user/send_msg",
					method: "GET",
					data: {
						phone: this.userName, //给后端给的phone
						type:this.type
					}
				}).then((res) => {

				})
				uni.showToast({
					title: '发送成功', //例子里是如果账号存在则提示后端传给我的msg:账号已存在信息,如果不存在，则才能继续注册
					icon: "none"
					//this.getCode = res.code; //res.code就是拿到的验证码,需要拿拿到的this.getCode与用户输入的userCode对比	
					//console.log(res.code); //打印一下从后端拿到的code值
				}).catch(() => {
					// uni.showToast({
					// 	title: '请求失败',
					// 	icon: 'none'
					// })
				})
				if (this.userPwd !== this.confirmUserpwd) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: "none"
					});
					return;
				}

				this.disable = true;
				let timer = setInterval(() => {
					--this.codenum;
					this.codemsg = '重新发送(' + this.codenum + ')';
				}, 1000); //一秒减一次
				setTimeout(() => {
					clearInterval(timer);
					this.codenum = 60;
					this.disable = false;
					this.codemsg = '重新发送';
				}, 60000); //60秒后重发
			},

			// gonextcode() {
			// 	if (!this.validate('userName')) return;
			// 	if (!this.validate('userPwd')) return;
			// 	if (!this.validate('userCode')) return;
			// 	let dataArray = []; // 创建一个数组用于保存请求内容
				
			// 	let requestData = {
			// 	  phone: this.userName, // 请求参数phone的值为this.userName
			// 		password: this.userPwd,
			// 	  code: this.userCode // 请求参数code的值为this.userCode
			// 	};
			// 	dataArray.push(requestData); // 将请求参数保存在数组中
			// 	uni.request({
			// 	  url: 'http://43.136.172.73/api/v1/auth/register',
			// 	  method: 'POST',
			// 	  data: requestData, // 直接使用requestData作为请求参数
			// 	  header: {
			// 	    // 
			// 			// "Content-Type": "application/x-www-form-urlencoded",
			// 			'Authorization': 'sfsdf',
			// 	  },
			// 	  success: function(res) {
			// 	    // 请求成功的回调函数
			// 	    console.log('00000' ,res);
			// 	  },
			// 	  fail: function(err) {
			// 	    // 请求失败的回调函数
			// 	    console.log(err);
			// 	  }
			// 	});
			// }

				gonextcode() {	
					if (!this.validate('userName')) return;
					if (!this.validate('userPwd')) return;
					if (!this.validate('userCode')) return;
					if (this.userPwd !== this.confirmUserpwd) {
						uni.showToast({
							title: "两次输入的密码不一致",
							icon: "none"
						});
						return;
					}
				
						
						let requestData = {
						  phone: this.userName, // 请求参数phone的值为this.userName
							password: this.userPwd,
						  code: this.userCode // 请求参数code的值为this.userCode
						};
						
					
					//请求先注释掉，不然总是加载中
					uni.request({
			
			url: 'http://43.136.172.73/api/v1/auth/register',
			method: 'POST',
			data: requestData, // 直接使用requestData作为请求参数
			header: {
						// "Content-Type": "application/x-www-form-urlencoded",
						'Authorization': 'sfsdf',
			},  
			success: (res) => {
				    // 请求成功的回调函数
					console.log('788',res.data.code)
				   if(res.data.code==1001){
					   uni.showToast({
					   	title:'注册失败',
					   	icon:'none',
					   	duration: 1000 // 显示时长为 3 秒
					   }) 
				   }else if (res.data.code === 2006) { // 添加这个判断语句
				  uni.showToast({
				    title: '用户已存在',
				    icon: 'none'
				  });
		      } else if (res.data.code === 1011) { // 添加这个判断语句
				  uni.showToast({
				    title: '验证码错误',
				    icon: 'none'
				  });
		      } else{
					   uni.showToast({
						title:'注册成功',
						icon:'none',
						duration: 1000 // 显示时长为 3 秒
					}) 
					console.log('00000' ,res);
					 setTimeout(function() {
					    uni.navigateTo({
					      url: "../login/login" 
					    });
					  }, 1000); 	
				   }
					
				  },
				  fail: (err) => {
				    // 请求失败的回调函数
				    console.log(err);
				  }
				});
			}
			
						
				// 	}).then((res) => {
				// 		console.log(res.code)
				// 		if (this.getCode = res.code) {
				// 			uni.showToast({
				// 				title: '注册成功', //例子里是如果账号存在则提示后端传给我的msg:账号已存在信息,如果不存在，则才能继续注册
				// 				icon: "none"
				// 			})
				// 			return;
				// 		} else {
				// 			uni.showToast({
				// 				title: '注册失败', //例子里是如果账号存在则提示后端传给我的msg:账号已存在信息,如果不存在，则才能继续注册
				// 				icon: "none"
				// 			})
				// 			/*uni.navigateTo({
				// 				url: "../index/index?phone=" + this.userName + " " //把输入的手机号给下一个验证码页面传过去
				// 			})*/
				// 		}
				// 	}).catch(() => {
				// 		uni.showToast({
				// 			title: '请求失败',
				// 			icon: 'none'
				// 		})
				// 	})
				
					//连了后端下面的else得删，上面的要还原
					/*else {
						/*uni.navigateTo({
							url: "../login-code/login-code?phone=" + this.userName + " " //把输入的手机号给下一个验证码页面传过去

						})*/



				}
		
	}
</script>

<style>
	.login-tel {
		padding: 30rpx;
		width: 100vw;
		height: 100vh;
	}

	.tel-main {
		padding: 0rpx 20rpx;
		padding-top: 0rpx;
	}

	.logo {
		padding-top: 70rpx;
		padding-bottom: 80rpx;
		display: flex;
		justify-content: center;

	}

	.tel {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #FFFF;
		background-color: #49BDFB;
		border-radius: 40rpx;
	}

	.login-form {}

	.login-user {
		display: flex;
		align-items: center;

		height: 100rpx;
		line-height: 100rpx;
		text-align: left;
		color: black;
		background-color: #f7f7f7;
		border-radius: 40rpx;
		padding: 20rpx 0;
		margin: 40rpx 0rpx;
		border-bottom: 2rpx solid #f7f7f7;
	}


	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 31rpx;
		text-align: center;
		align-items: center;
		color: black;
		font-weight: 400;
		width: 200rpx;
	}

	.show-pwd {
		position: absolute;
		right: 70rpx;
		color: #49BDFB;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		cursor: pointer;

	}

	.no-border {
		outline: none;
		border: none;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
	}

	.btn {
		margin-left: -20rpx;
		margin-right: -20rpx;
		padding: 50rpx;
	}

	.user-text {
		margin-left: 20rpx;
		padding-right: 10rpx;
		font-size: 32rpx;
		align-items: center;
		text-align: center;
		color: black;
		font-weight: 400;
	}

	.btn1 {
		width: 250rpx;
		font-size: 30rpx;
		height: 100rpx;
		padding-left:26rpx ;
		line-height: 100rpx;
		border-radius: 40rpx;
		color: #49BDFB;
	}
</style>